<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="搜索组件" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
				
				

				<tm-search v-model="value" showLeft  prefixIcon="" suffixIcon="icon-search"></tm-search>
				<view style="height: 50upx;"></view>
				<tm-search clear v-model="value" prefixText="地址" confirmText="取消" color="green" insertColor="green" align="center"></tm-search>
				<view style="height: 50upx;"></view>
				<tm-search :fllowTheme="false" v-model="value" suffix-icon="icon-plus"  bgColor="bg-gradient-blue-accent" color="white" insertColor="blue" :showLeft="true">
					<template #left>
						<view>
							<tm-pickersCity btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
								<view>
									<text class="text-size-n">{{addr[1]}}</text>
									<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
								</view>
							</tm-pickersCity>
							<view class="text-size-xs">请选择</view>
						</view>
					</template>
					<template #suffixIcon>
						<view class="border-blue-l-1 pl-24  flex-center " style="height: 30rpx;line-height: 30rpx;">
							<tm-icons dense name="icon-qrcode" color="blue"></tm-icons>
						</view>
					</template>
					<template #right>
						
						<view style="width: 42rpx;height:42rpx;" class="rounded border-white-a-1 text-align-center flex-center">
							<tm-icons  :size="22" name="icon-plus" color="white"></tm-icons>
						</view>
					</template>
				</tm-search>
				<view style="height: 50upx;"></view>
				<tm-search v-model="value" bgColor="bg-gradient-pink-accent" insertColor="pink"  align="center" :showRight="false" :round="24"></tm-search>
				<view style="height: 50upx;"></view>
				
				
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSearch from "@/tm-vuetify/components/tm-search/tm-search.vue"
	import tmPickersCity from "@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmFullView,tmSheet,tmMenubars,tmButton,tmSearch,tmPickersCity,
		tmIcons,
		},
		data() {
			return {
				addr:['江西省','南昌市','西湖区'],
				value:''
			}
		},
		methods: {
			okCity(e){
				console.log(e);
				this.addr = e;
			}
		}
	}
</script>

<style>

</style>
